<template>
  <div class="app-container">
    <!-- 添加或修改团队对话框 -->

    <el-form
      :disabled="true"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="150px"
    >
      <el-form-item label="指导单位" prop="college">
        <!-- <el-input v-model="form.college" placeholder="请输入指导单位" style="width: 80%;" /> -->
        <el-select v-model="form.college" placeholder="请选择" clearable style="width: 80%">
          <el-option
            v-for="(dict, index) in unitNameList"
            :key="index"
            :label="dict.sponsorName"
            :value="dict.sponsorName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="团队名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" style="width: 80%" />
        <div style="color: #999">团队名称内请不要包括学校、系部名称</div>
      </el-form-item>
      <!-- <el-form-item label="海报" prop="postId">
        <el-upload
          style="width: 80%"
          :action="uploadFileUrl"
          :limit="1"
          list-type="picture"
          :on-change="changePostIdImage"
          :on-remove="removePostIdImage"
          :on-error="handleUploadError"
          :on-success="handleUploadSuccess"
          :file-list="postIdFileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="调研主题" prop="researchtopic">
        <el-select multiple v-model="form.researchtopic" placeholder="请选择" style="width: 40%">
          <el-option
            v-for="dict in researchtopicOptions"
            :key="dict.optionName"
            :label="dict.optionName"
            :value="dict.optionName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否重点团队" prop="isimportant">
        <el-select v-model="form.isimportant" placeholder="请选择" style="width: 40%">
          <el-option
            v-for="dict in isimportantOptions"
            :key="dict.optionId"
            :label="dict.optionName"
            :value="dict.optionId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实践成果呈现形式" prop="presentation">
        <el-select multiple v-model="form.presentation" placeholder="请选择" style="width: 40%">
          <el-option
            v-for="dict in presentationOptions"
            :key="dict.optionName"
            :label="dict.optionName"
            :value="dict.optionName"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="呈现形式详情" prop="presentationdetail" v-if="form.presentation == 0"> multiple
        <el-input
          v-model="form.presentationdetail"
          placeholder="请输入呈现形式详情"
          style="width: 80%"
        />
      </el-form-item> -->
      <el-form-item label="经费预算" style="font-size: 25px">
        <span>{{ allMoney }} 元</span>
      </el-form-item>

      <el-form-item label="交通费" prop="transportation">
        <el-input
          @change="moneyChange()"
          type="number"
          v-model.number="form.transportation"
          placeholder="请输入交通费"
          style="width: 80%"
          ><template slot="append">元</template></el-input
        >
      </el-form-item>
      <el-form-item label="住宿费" prop="accommodation">
        <el-input
          @change="moneyChange()"
          type="number"
          v-model.number="form.accommodation"
          placeholder="请输入住宿费"
          style="width: 80%"
          ><template slot="append">元</template></el-input
        >
      </el-form-item>
      <el-form-item label="宣传费" prop="publicity">
        <el-input
          @change="moneyChange()"
          type="number"
          v-model.number="form.publicity"
          placeholder="请输入宣传费"
          style="width: 80%"
          ><template slot="append">元</template></el-input
        >
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        v-hasPermi="['eqxm:team:edit']"
        style="float: right"
        type="primary"
        @click="submitForm"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  listTeam,
  getTeam,
  delTeam,
  addTeam,
  updateTeam,
  exportTeam,
} from '@/api/eqxm/team';
import { listSponsor } from "@/api/system/sponsor";
import { listOption } from '@/api/system/option';
import CommonUtils from '@/utils/CommonUtils';
import { GetUrlString } from '@/utils/string';
import { mapGetters } from 'vuex';
export default {
  name: 'Team',
  components: {},
  computed: {
    ...mapGetters(['roles', 'name']),
  },
  props: ['isAdmin'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 团队表格数据
      teamList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/images/uploadLocal',
      postIdFileList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        college: null,
        researchtopic: [],
        isimportant: null,
        presentation: [],
        presentationdetail: null,
        transportation: null,
        accommodation: null,
        publicity: null,
      },
      researchtopicValue: null,
      isimportantValue: null,
      presentationValue: null,
      // 表单参数
      form: {
        college: null,
        name: null,
        postId: null,
        researchtopic: null,
        isimportant: null,
        presentation: null,
        transportation: null,
        accommodation: null,
        publicity: null,
      },
      // 表单校验
      rules: {
        college: [{ required: true, message: '指导单位不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '团队名称不能为空', trigger: 'blur' }],
        postId: [{ required: true, message: '海报不能为空', trigger: 'blur' }],
        researchtopic: [{ required: true, message: '调研主题不能为空', trigger: 'blur' }],
        isimportant: [{ required: true, message: '是否重点团队不能为空', trigger: 'blur' }],
        presentation: [{ required: true, message: '呈现形式不能为空', trigger: 'blur' }],
        transportation: [{ required: true, message: '交通费不能为空', trigger: 'blur' }],
        accommodation: [{ required: true, message: '住宿费不能为空', trigger: 'blur' }],
        publicity: [{ required: true, message: '宣传费不能为空', trigger: 'blur' }],
      },
      unitNameList: [],
      isimportantOptions: [],
      presentationOptions: [],
      researchtopicOptions: [],
      teamId: '',
      allMoney: 0,
    };
  },
  created() {
    this.init();
    listSponsor().then(response => {
      this.unitNameList = response.rows;
    });
    listOption({ optionType: 1 }).then(response => {
      this.researchtopicOptions = response.rows;
    });
    listOption({ optionType: 3 }).then(response => {
      this.isimportantOptions = response.rows;
    });
    listOption({ optionType: 2 }).then(response => {
      this.presentationOptions = response.rows;
    });
  },
  methods: {
    /** 查询团队列表 */
    init() {
      console.log(this.isAdmin, 'commonStu');
      const id = CommonUtils.getCurTeamInfo().id;
      this.teamId = id;
      if (id != '') {
        getTeam(id).then(response => {
          this.form = response.data;
          this.form.presentation = response.data.presentation.split(',');
          this.form.researchtopic = response.data.researchtopic.split(',');
          console.log(this.form.presentation);
          // this.form.status = null;
          this.form.isimportant = response.data.isimportant / 1;
          // if (response.data.postId?response.data.postId.indexOf('?') != -1:false) {
          //   let obj = {};
          //   let arr = response.data.postId.slice(response.data.postId.indexOf('?') + 1).split('&');
          //   arr.forEach(item => {
          //     let param = item.split('=');
          //     obj[param[0]] = param[1];
          //   });
          //   this.form.postId = obj .name;
          //   console.log(this.form.postId)
          // }
          this.postIdFileList = response.data.postId
            ? [{ name: GetUrlString(response.data.postId, 'name'), url: response.data.postId }]
            : [];
          console.log(this.postIdFileList);
          // listOption({ optionId: response.data.researchtopic }).then(response => {
          //   this.researchtopicValue = response.rows[0].optionName;
          //   console.log(this.researchtopicValue);
          // });
          // listOption({ optionId: response.data.isimportant/1 }).then(response => {
          //   this.isimportantValue = response.rows[0].optionName;
          //   console.log(this.isimportantValue);
          // });
          // listOption({ optionId: response.data.presentation }).then(response => {
          //   this.presentationValue = response.rows[0].optionName;
          //   console.log(this.presentationValue);
          // });
          this.moneyChange();
        });
      } else {
        listSponsor().then(response => {
          this.unitNameList = response.rows;
          console.log(response, '111');
        });
      }
    },
    disChanges() {
      var status = this.form.status == 0 || this.form.status == 2 || this.form.status == 3;
      return this.isAdmin || (this.form.createBy == this.name && status);
    },
    changePostIdImage(file, fileList) {
      console.log(file.code);
      if (file.status === 'success') {
        this.form.postId = file.response.data.url;
        this.postIdFileList = fileList;
      }
    },
    removePostIdImage() {
      this.form.postId = null;
      this.postIdFileList = [];
    },
    handleUploadError() {
      this.$modal.msgError('上传失败');
    },
    handleUploadSuccess(res) {
      console.log(res, 'resssss');
      if (res.code == 200) {
        this.$modal.msgSuccess('上传成功');
      } else {
        this.$modal.msgError('上传失败');
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        delFlag: null,
        college: null,
        createBy: null,
        researchtopic: [],
        isimportant: null,
        createTime: null,
        presentation: [],
        updateBy: null,
        presentationdetail: null,
        updateTime: null,
        transportation: null,
        accommodation: null,
        publicity: null,
      };
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      //清空store的项目信息
      let teamInfo = {};
      CommonUtils.setCurTeamInfo(teamInfo);
      const vm = this;
      vm.$router.push({
        //核心语句
        path: '/team/teamManage', //跳转的路径
        query: { type: 0 },
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getTeam(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = '修改团队';
      });
    },
    /** 提交按钮 */
    submitForm() {
        this.$parent.jump(1);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除团队编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delTeam(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有团队数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportTeam(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    },
    moneyChange() {
      this.allMoney = this.form.transportation + this.form.accommodation + this.form.publicity;
    },
  },
};
</script>
